<template>
    <div>
      <div class="banner">
        <div class="img">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(item,index) in images" :key='index'>
                <img :src="item.pic">
              </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 热门歌单 -->
      <div class="hot-song">
        <div class="title">
          <span class="public-name">热门歌单</span>
          <span class="icon iconfont icon-Group-" @click="gotopersonalized"></span>
        </div>
        <div class="lists">
          <ul>
            <li v-for="(item,index) in personalized" :key="index" v-show="index < 6" @click="gotorankinglist(item.id)">
              <div class="img"><img :src="item.picUrl"></div>
              <span class="words">{{item.name}}</span> 
              <div class="icon">
              <span class="iconfont icon-headset"></span>
              <span class="num">{{item.playCount | num}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 最新专辑 -->
      <div class="new-album">
        <div class="title">
          <span class="public-name">最新专辑</span>
          <span class="icon iconfont icon-Group-" @click="gotoalbum"></span>
        </div>
        <div class="content" ref="content">
          <ul>
            <li class="item" v-for="(item,index) in AlbumNewest" :key="index" v-show='index <= 4' @click="gotoAlbumList(item.id)">
              <div class="img"><img :src="item.picUrl"></div>
              <div class="song-name">{{item.name}}</div>
              <div class="name">{{item.artist.name}}</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 热门歌手 -->
      <div class="hot-singer">
        <div class="title">
          <span class="public-name">热门歌手</span>
          <router-link to="/singer" class="icon iconfont icon-Group-"></router-link>
        </div>
        <div class="content" ref="content2">
        <ul>
            <li class="item" v-for="(item,index) in TopArtists" :key="index" v-show='index <= 9'>
              <router-link :to='"/singer/singerList?id="+item.id+"&picUrl="+item.picUrl+"&name="+item.name'>
                <div class="img"><img :src="item.picUrl"></div>
                <div class="singer-name">{{item.name}}</div>
             </router-link>
            </li>
        </ul>
        </div>
      </div>
      <!-- 最新单曲 -->
      <div class="new-song">
        <div class="title">
          <span class="public-name">最新单曲</span>
        </div>
        <div class="content">
          <van-swipe :loop="false" :width="300">
            <van-swipe-item v-for="(item,index) in newSongs" :key="index">
              <div class="item" v-for="(k,i) in item" :key="i" @click="setId(k.id)">
                <div class="img"><img :src="k.picUrl"></div>
                <div class="name">
                  <span class="song-name">{{k.name}}</span>
                  <span class="singer-name">{{k.song.artists[0].name}}</span>
                </div>
                <span :class="['icon','iconfont','icon-bofang',{'active':newSongsNum == k.id}]"></span>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      </div>
</template>

<script>
    import {getBanner,getPersonalized,getAlbumNewest,getTopArtists,getPersonalizedNewsong} from "../api/recommend";
    import BScroll from '@better-scroll/core'
    export default {
      name:'recommend',
        data() {
          return {
                      images:null,//轮播图
                      personalized:null,//热门歌单
                      AlbumNewest:null,//专辑
                      TopArtists:null,//热门歌手
                      newSongs:[],//推荐新音乐
                      newSongsNum:null,
                  }
          },
          methods: {
            // 跳转歌单详情
            gotorankinglist(id){
              this.$router.push({
                  path:'/ranking/rankList',
                  query:{id}
              }) 
            },
            gotoAlbumList(id){
                this.$router.push({
                    path:'/recommend/album/albumList',
                    query:{
                        id,
                    }
                })
            },
            gotoalbum(){
              this.$router.push('/recommend/album')
            },
            gotopersonalized(){
              this.$router.push('/recommend/personalized')
            },
            // 传递歌曲id
            setId(id){
                this.$emit("get-player-id",id)
                this.newSongsNum = id;
            },
            getBannerFun(){
                // 轮播图数据
                getBanner().then(data=>{
                    if(data.code == 200){
                        this.images = data.banners;
                        console.log(data);
                    }
                })
            },
            getPersonalizedFun(){
                // 热门歌单数据
                getPersonalized().then(data=>{
                    if(data.code == 200){
                        this.personalized = data.result
                    }
                })
            },
            getAlbumNewestFun(){
              // 获取最新专辑
              getAlbumNewest().then(data=>{
                if(data.code == 200){
                    this.AlbumNewest = data.albums
                }
              })
            },
            getTopArtistsFun(){
              // 获取热门歌手
              getTopArtists().then(data=>{
                this.TopArtists=data.artists;
              })
            },
            getPersonalizedNewsongFun(){
              // 获取最新单曲
              getPersonalizedNewsong().then(data=>{
                this.newSongs.push(data.result.slice(0,3))
                this.newSongs.push(data.result.slice(3,6))
                this.newSongs.push(data.result.slice(6,9))
              })
            },
            // 最新专辑滚动
            // 滚动效果初始化
            _initScroll(){
                    // 左侧滚动效果初始化
                    this.content = new BScroll(this.$refs.content,{
                      startX: 0,
                      click: true,
                      scrollX: true,
                      // 忽略竖直方向的滚动
                      scrollY: false,
                      // eventPassthrough: "vertical"
                    })

                    this.content2 = new BScroll(this.$refs.content2,{
                      startX: 0,
                      click: true,
                      scrollX: true,
                      // 忽略竖直方向的滚动
                      scrollY: false,
                      // eventPassthrough: "vertical"
                    })
              }
        },
        created(){
            this.getPersonalizedNewsongFun(),
            this.getBannerFun(),
            this.getPersonalizedFun(),
            this.getAlbumNewestFun(),
            this.getTopArtistsFun(),
            // 最新专辑
            this.$nextTick(()=>{
                    this._initScroll();
                })
        
              },
        filters:{
          num(value){
            let w = value > 10000 ? value/10000 : value;
            let y = w > 10000 ? parseInt(w/10000) + "亿" : parseInt(w) + "万";
            return y;
          }
        }
    }
</script>

<style lang="less">
  // 公共title样式
  .title{
      width: 96%;
      height: 60px;
      font-size: 16px;
      font-weight: bold;
      line-height: 60px;
      margin: 0 auto;
      .public-name{
        padding-left: 5px;
        border-left:3px solid #d43c33 ;
      }
      .icon{
        display: inline-block;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        float: right;
        color: #333;
      }
  }
  // 轮播图
  .banner{
    width: 100%;
    height: 134px;
    margin-top: 80px;
    background-color: #d43c33;
    margin-bottom: 31px;
    position: relative;
    .img{
      width: 96%;
      height: 165px;
      border-radius: 5px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      // background-color: turquoise;
      .van-swipe{
        widows: 100%;
        height: 100%;
        .van-swipe-item{
          width: 100%;
          height: 100%;
          img{
            display: block;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        }
      }
    }
  }
  // 热门歌单
  .hot-song{
    width: 100%;
    position: relative;
    .title{
      .title;
    }
    .lists{
      width: 96%;
      margin: 0 auto;
      ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
          width: 32%;
          position: relative;
          height: 160px;
          color: #28282b;
          font-size: 12px;
          margin-bottom: 10px;
          .words{
            display: block;
            line-height:16px;
            margin-top: 7px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .img{
            width: 100%;
            height: 118px;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
          }
          img{
            display: block;
            width: 100%;
            border-radius: 5px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
          .icon{
            position: absolute;
            top:0;
            right: 2px;
            color: white;            
          }
        }
      }
    }
  }
  // 最新专辑
  .new-album{
    width: 100%;
    position: relative;
    .title{
     .title;
    }
    .content{
      width: 96%;
      margin: 0 auto;
      overflow: hidden;
    }
    ul{
      width: 800px;
      .item{
        width: 150px;
        float: left;
        &:nth-child(n+2){
          margin-left:10px;
        }
        .img{
          width: 150px;
          height: 150px;
          position: relative;
          img{
            display: block;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        }
        .song-name{
          font-size: 14px;
          font-weight: bold;
          margin: 10px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .name{
          font-size:12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #666666;
        }
      }
    }
  }
  // 热门歌手
  .hot-singer{
    .title{
      .title;
    }
    .content{
      width: 96%;
      margin: 0 auto;
      overflow: hidden;
    }
    ul{
      width: 1090px;
      .item{
        width: 100px;
        float: left;
        &:nth-child(n+2){
          margin-left:10px;
        }
        .img{
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
          overflow: hidden;
          img{
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        }
        .singer-name{
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          margin: 10px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  // 最新单曲
  .new-song{
    padding-bottom: 64px;
    .title{
      .title;
    }
    .content{
      height: 210px;
      .item{
        width: 100%;
        height: 60px;
        display: flex;
        .img{
          width: 60px;
          height: 60px;
          margin:0 7.5px;
          border-radius: 5px;
          position: relative;
          overflow: hidden;
          img{
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        }
        &:nth-child(n+2){
          margin-top: 15px;
        }
        .name{
          width: 150px;
          height: 60px;

          span{
            display:block;
          }
          .song-name{
            font-size: 16px;
            margin-top: 11.5px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .singer-name{
            font-size: 12px;
            color: #666666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .icon{
          color: #333;
          line-height: 60px;
          margin-left: 40px;
          &.active{
            color: #d43c33;
          }
        }
      }
      .van-swipe{
        height: 210px;  
      }
      .van-swipe__indicators{
        display: none;
      }
    }
  }
</style>